<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" @click="getrouter" />
    <HelloWorld
      msg="Welcome to Your Vue.js App"
      :title="titleNumber"
      :likes="50"
      @submit="getSubmit"
      ref="helloWorld"
    />
    <AboutView ref="aboutView"></AboutView>
  </div>
</template>

<script setup>
  import { useRouter } from "vue-router";
  import { ref,onMounted } from "vue";
  import HelloWorld from "@/components/HelloWorld.vue";
  import AboutView from "./AboutView.vue";
  const router = useRouter();
  const helloWorld = ref(null);
  const aboutView = ref(null);
  let titleNumber = ref(0);
  function getrouter() {
    // router.push({ path: "about", query: { userId: "123" } });
    console.log(aboutView.value)
    helloWorld.value.buttonClick()
    aboutView.value.greet()
  }
  function getSubmit(val) {
    titleNumber.value++
  }
</script>
